<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>

    <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">
	   <script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
	   <script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
     <style type="text/css">
        nav.navbar{
          opacity: 0.5;
          position: fixed;
          width: 100%;
          z-index: 1000;
          /*background: #816fe1;*/
          /*background: url(./src/img1.jpg);*/
        }

        .navbar{
          margin-bottom: 0;
        }
        .navbar .nav>li>a{
          color: #blue;
        }
        #myCarousel img{
          width: 100%;
          height: 350px;
        }
        #myCarousel{
          padding-top: 0px;
        }

        .rownav-first{
          background: url(./src/img1.jpg);
          height: 150px;
          transition: all 0.3s;
        }

        .rownav-first:hover .rownav-title{
          /*opacity: 0.7;*/
          display: block;
        }

        .rownav-first:hover{
          opacity: 0.7;
          transform: scale(1.1);
        }

        .rownav-title{
          color: #fff;
          display: none;
        }
        @media (max-width:768px) {
          .rownav-first{
            /*width: 100%;*/
            height: 60px;
          }
        }
        @media (min-width:1170px) {
          .rownav-first{
            height: 200px;
          }
        }
        /*@media (min-width:1171px) {*/
        .live{
          height: 250px;
          background: url(./src/img2.jpg);
        }

        .join{
          height: 250px;
          background: url(./src/img1.jpg);
        }

        .news{
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }

        .news-list{
          padding: 8px;
        }

        .news>.time{
          display: inline;
          color: purple;
        }

        .news>.title{
          margin-left: 10px;
          display: inline;
          font-size: 15pt;
        }


        /*.rownav-first{
          height: 150px;
        }*/

     </style>
  </head>
  <body>

    <nav class="navbar navbar-default" role="navigation">
    <div class="container-fluid">
    <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse"
                data-target="#example-navbar-collapse">
            <span class="sr-only">切换导航</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
          <a href="#"><img class="navbar-brand" style="width:120px; height:50px"src="./src/logo.png" alt="" /></a>

    </div>
    <div class="collapse navbar-collapse" id="example-navbar-collapse">
        <ul class="nav navbar-nav navbar-right">
            <li class="active"><a href="#">旅游推荐</a></li>
            <li><a href="#">熊旅专线</a></li>
            <li><a href="#">出入境游</a></li>
            <li><a href="#">旅游攻略</a></li>
            <li><a href="#">熊旅直播</a></li>
            <li><a href="#">娱乐时事</a></li>
            <li><a href="#">演艺制作</a></li>
            <li><a href="#">联系我们</a></li>
            <li><a href="#">登陆/注册</a></li>
        </ul>
    </div>
    </div>
    </nav>

    <!-- <include file="./nav.html"> -->

    <!-- <div id="myCarousel"class="carousel slide">
      <div class="carousel-inner">
        <div class="item activce">
          <img src="./src/img1.jpg" alt="First slide">
        </div>

        <div class="item">
          <img src="./src/img1.jpg" alt="Second slide">
        </div>
        <div class="item">
          <img src="./src/img1.jpg" alt="Third slide">
        </div>
      </div> -->

      <div id="myCarousel" class="carousel slide">
	<!-- 轮播（Carousel）指标 -->
	<ol class="carousel-indicators">
		<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
		<li data-target="#myCarousel" data-slide-to="1"></li>
		<li data-target="#myCarousel" data-slide-to="2"></li>
	</ol>
	<!-- 轮播（Carousel）项目 -->
	<div class="carousel-inner">
		<div class="item active">
			<img src="./src/img1.jpg" alt="First slide">
		</div>
		<div class="item">
			<img src="./src/img2.jpg" alt="Second slide">
		</div>
		<div class="item">
			<img src="./src/img3.jpg" alt="Third slide">
		</div>
	</div>

</div>
<br>
<div class="row">
  <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 rownav-first">
    <!-- <img class="" src="./src/img1.jpg" alt=""> -->
    <h3  class="pull-right rownav-title">旅游推荐</h3>
  </div>
  <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2 rownav-first">
    <!-- <img class="rownav-first" src="./src/img1.jpg" alt=""> -->
    <h3  class="pull-right rownav-title">熊旅专线</h3>
  </div>
  <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2 rownav-first">
    <!-- <img class="rownav-first" src="./src/img2.jpg" alt=""> -->
    <h3  class="pull-right rownav-title">出入境游</h3>
  </div>
  <div class="col-xs-5 col-sm-5 col-md-5 col-lg-5 rownav-first">
    <!-- <img class="rownav-first" src="./src/img2.jpg" alt=""> -->
    <h3  class="pull-right rownav-title">旅游攻略</h3>
  </div>

  <br>

  <div class="col-xs-4">
    <div class="news-list">
      <div class="news">
        <p class="time">00:00</p><h4 class="title">fsadfkhlasdfhaladsfasdfgasdfgasdhfgasdfhgaskdfhgasdfkgasdkfhgask</h4>
        <p class="descript">gasdfadsfasdfafahf;asdfhasdjfhlasdfhasdlgfasdhgfasdhfgasdhfgasldfhasdlfhadslfsadjfgasdlfaslh</p>
      </div>
      <div class="news">
        <p class="time">00:00</p><h4 class="title">fsadfkhlasdfhaladsfasdfgasdfgasdhfgasdfhgaskdfhgasdfkgasdkfhgask</h4>
        <p class="descript">gasdfadsfasdfafahf;asdfhasdjfhlasdfhasdlgfasdhgfasdhfgasdhfgasldfhasdlfhadslfsadjfgasdlfaslh</p>
      </div>
      <div class="news">
        <p class="time">00:00</p><h4 class="title">fsadfkhlasdfhaladsfasdfgasdfgasdhfgasdfhgaskdfhgasdfkgasdkfhgask</h4>
        <p class="descript">gasdfadsfasdfafahf;asdfhasdjfhlasdfhasdlgfasdhgfasdhfgasdhfgasldfhasdlfhadslfsadjfgasdlfaslh</p>
      </div>
      <div class="news">
        <p class="time">00:00</p><h4 class="title">fsadfkhlasdfhaladsfasdfgasdfgasdhfgasdfhgaskdfhgasdfkgasdkfhgask</h4>
        <p class="descript">gasdfadsfasdfafahf;asdfhasdjfhlasdfhasdlgfasdhgfasdhfgasdhfgasldfhasdlfhadslfsadjfgasdlfaslh</p>
      </div>

      <div class="pull-right">
        <a href="#">more</a>
      </div>
    </div>
  </div>
  <div class="col-xs-8">
    <div class="live">
      <!-- <img src="./s
      rc/img1.jpg" alt=""> -->
    </div>
  </div>

  <div class="col-xs-4">
    <div class="join">

    </div>
  </div>
  <div class="col-xs-8">
    <div class="info-list">
      <div class="info">
        <p class="time">00:00   <span class="title">fsadfkhlasdfhal</span></p>
        <p class="descript">gasdfadsfasdfafa</p>
      </div>
    </div>
  </div>
</div>
</div>

<footer class="footer pull-center">
    <div class="container">
      <h4>2018熊旅国际版权所有</h4>
    </div>
</footer>
<script type="text/javascript">
  // const navDOM = document.querySelector("nav.navbar");
  // navDOM.style.backgroundImage = 'url(./src/img1.jpg)';
  // navDOM.style.backgroundColor = '#aef';

</script>

<script>
  $(function(){
    $('#myCarousel').carousel('cycle');
  });
  //
  // $(function(){
  //   $('#myCarousel').on('slide.bs.carousel', function(){
  //     const divDOM = document.querySelector('.carousel-inner>.active')
  //     const navDOM = document.querySelector("nav.navbar");
  //
  //     console.log(divDOM.children[0].attributes[0].nodeValue);
  //     navDOM.style.backgroundImage = 'url('+divDOM.children[0].attributes[0].nodeValue+')';
  //   })
  // })

  $(document).scroll(function(event){
    if(+$(event.target).scrollTop()>30){
      $('nav.navbar').css('opacity',1);
      $('nav.navbar').css('background','#9F79EE')
    }else if(+$(event.target).scrollTop()<=0){
      $('nav.navbar').css('opacity',0.5);
      $('nav.navbar').css('background','#fff')
    }else{
      $('nav.navbar').css('opacity',+$(event.target).scrollTop()*0.5/30+0.5);
    }
  });
</script>
  </body>
</html>
